<template>
  <el-dialog v-model="dialogFormVisible" :title="flag ? '新增' : '修改'">
    <el-form :model="form" label-width="auto" :inline="true" label-position="top" :rules="rules" ref="ruleFormRef"
      v-loading="isLoading" element-loading-text="数据加载中...">
      <el-form-item label="父级部门" v-if="flag || form.parentId !== '0'">
        <el-tree-select clearable v-model="form.parentId" :data="treeData" check-strictly :render-after-expand="false"
          placeholder="请选择上级部门" :props="{
            children: 'children',
            label: 'deptName',
            value: 'deptId'
          }" style="width: 200px" />
      </el-form-item>
      <el-form-item label="部门名称" prop="deptName">
        <el-input clearable v-model="form.deptName" placeholder="请输入部门名称" style="width: 200px;" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-input v-model="form.manager" placeholder="请输入部门负责人" style="width: 200px;" />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input clearable v-model="form.phone" placeholder="请输入联系电话" style="width: 200px;" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input clearable v-model="form.email" placeholder="请输入邮箱" style="width: 200px;" />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number clearable v-model="form.sort" :min="0" style="width: 200px;" />
      </el-form-item>
      <el-form-item label="备注" prop="remark" style="width: 100%;">
        <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item label="部门状态" style="width: 100%;">
        <el-switch v-model="form.status" :active-value="'0'" :inactive-value="'1'" inline-prompt active-text="正常"
          inactive-text="禁用" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">返回</el-button>
        <el-button type="primary" :disabled="isLoading" @click="addOrEdit">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import api from "@/api"
import { ElMessage } from 'element-plus'

const rules = ref({
  deptName: [
    { required: true, message: '请输入部门名称', trigger: 'blur' }
  ],
  sort: [
    { required: true, message: '请输入排序', trigger: 'blur' }
  ]
})
const isLoading = ref(false)
const ruleFormRef = ref()
const flag = ref(false)
const dialogFormVisible = ref(false)
const form = ref({})
const treeData = ref([])

//初始化
const init = async (id) => {
  dialogFormVisible.value = true
  isLoading.value = true
  getTreeData()
  if (id) {
    flag.value = false
    const res = await api.post('/author/dept/queryById', { deptId: id })
    if (res.data.code === 200) {
      form.value = res.data.data
    } else {
      ElMessage.error(res.data.msg)
    }
  } else {
    flag.value = true
    form.value = { sort: 0, status: '0' }
  }
  isLoading.value = false
}
const emit = defineEmits(['serversUpdated']);
//修改
const addOrEdit = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      isLoading.value = true
      let url
      if (flag.value) {
        url = '/author/dept/add'
      } else {
        url = '/author/dept/edit'
      }
      const res = await api.post(url, form.value)
      if (res.data.code === 200) {
        ElMessage.success(res.data.msg)
        emit('serversUpdated')
        dialogFormVisible.value = false
      } else {
        ElMessage.error(res.data.msg)
      }
      isLoading.value = false
    }
  })
}

const getTreeData = async () => {
  const res = await api.get('/author/dept/treeData')
  if (res.data.code === 200) {
    treeData.value = res.data.data
  } else {
    ElMessage.error(res.data.msg)
  }
}
defineExpose({
  init
});
</script>